<template>
  <div>
    <el-row :gutter="0" style="margin-left:60px;">
      <el-form
        ref="ruleParams"
        :model="ruleData"
        :rules="rules"
        size="mini"
        label-width="120px"
        label-position="left"
      >
        <el-col :span="22">
          <el-form-item label="菜单" prop="menuPermissions">
            <el-cascader
              @change="findRuleIdsByUrl"
              v-model="ruleData.menuPermissions"
              :options="menuPermissionsOptions"
              :props="menuPermissionsProps"
              :style="{ width: '100%' }"
              placeholder="请选择菜单"
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="用户组" prop="userGroupAppletMenus">
            <el-checkbox-group
              v-model="ruleData.userGroupAppletMenus"
              size="medium"
            >
              <el-checkbox
                v-for="(item, index) in ruleIdsOptions"
                :key="index"
                :label="parseInt(index)"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-button type="primary" @click="savePerssions()">保 存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m, notify } from "@/store/yg/common/local";
export default {
  components: {},
  props: [],
  data() {
    return {
      ruleData: {
        menuPermissions: [],
        userGroupAppletMenus: []
      },
      rules: {},
      menuPermissionsOptions: [],
      ruleIdsOptions: [],
      menuPermissionsProps: {
        multiple: false,
        label: "label",
        value: "value",
        children: "children"
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initOptions();
  },
  mounted() {},
  methods: {
    savePerssions() {
      console.log(this.ruleData);
      var params = {};
      params = this.ruleData;
      params.name = this.ruleData.menuPermissions[3];
      ajax("batchSaveMenuPermissions", params).then(
        res => {
          if (res.code == 200) {
            this.$message.success("保存成功");
          } else {
            if (null != res.message) {
              this.$message.error(res.message);
            } else {
              this.$message.error("保存失败!");
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    findRuleIdsByUrl() {
      console.log(this.ruleData);
      var params = {};
      params.name = this.ruleData.menuPermissions[3];
      ajax("findRuleIdsByUrl", params).then(
        res => {
          console.log(res);
          this.ruleData.userGroupAppletMenus = res;
        },
        error => {
          console.log(error);
        }
      );
    },

    //初始化下拉
    initOptions() {
      const sources = ["cascaderMenuSource", "roleSource"];
      sources.forEach(bean => {
        var uri = "/api/entry/source?bean=" + bean;
        axios.post(constant.API_SERVER + uri).then(
          response => {
            if (bean === "cascaderMenuSource") {
              this.menuPermissionsOptions = JSON.parse(
                m(JSON.stringify(response.data))
              );
              console.log(this.menuPermissionsOptions);
            } else if (bean === "roleSource") {
              this.ruleIdsOptions = response.data;

              console.log(this.ruleIdsOptions);
            }
          },
          error => {
            console.info(error);
          }
        );
      });
    }
  }
};
</script>
<style></style>
